<template>
	<view class="container b-f" v-if="is_dealer && isData" :style="{ minHeight: windowHeight + 'px' }">
		<!-- 头部背景图 -->
		<view class="dealer-bg"><image mode="widthFix" :src="background"></image></view>
		<view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
			<!-- 用户信息 -->
			<view class="widget widget__base m-top20 b-f dis-flex flex-dir-column">
				<view class="base__user f-30">
					<!-- 用户头像 -->
					<view class="user-avatar"><image :src="userInfo.avatar.file_path  || userDefaultFace"></image></view>
					<view class="user-nickName f-32">{{ user.nickName }}</view>
					<view class="user-referee f-24 col-9">推荐人：{{ dealer.referee ? dealer.referee.nickName : '平台' }}</view>
				</view>
				<view class="base__capital dis-flex flex-dir-column">
					<view class="base__capital dis-flex flex-dir-column">
						<!-- 佣金卡片 -->
						<view class="capital-card dis-flex">
							<view class="card-left flex-box dis-flex flex-dir-column flex-x-around">
								<view class="f-28 col-f">
									<text space="ensp">{{ words.index.words.money.value }} {{ dealer.money }} 元</text>
								</view>
								<view class="f-28 col-f">
									<text space="ensp">{{ words.index.words.freeze_money.value }} {{ dealer.freeze_money }} 元</text>
								</view>
							</view>
							<view class="card-right flex-box dis-flex flex-x-end flex-y-center">
								<view class="withdraw-btn f-26" @tap="toPage" data-url="/pageUser/withdraw/apply/dealer" :data-auth="true">{{ words.index.words.withdraw.value }}</view>
							</view>
						</view>
						<!-- 已提现金额 -->
						<view class="capital-already clear">
							<view class="already-left f-28 fl">{{ words.index.words.total_money.value }}</view>
							<view class="already-right f-28 fr">{{ dealer.total_money }}元</view>
						</view>
					</view>
					<view class="widget__operat clear b-f">
						<view class="operat__item" @tap.stop="toPage" data-url="/pageDealer/order/order" :data-auth="true">
							<view class="item__icon"><text class="suifont sui-dingdan" style="color:#FF7575;"></text></view>
							<view class="item__text f-28">分销订单</view>
						</view>
						<view class="operat__item" @tap.stop="toPage" data-url="/pageDealer/team/team" :data-auth="true">
							<view class="item__icon"><text class="suifont sui-tuandui" style="color:#59C78E;"></text></view>
							<view class="item__text f-28">我的团队</view>
						</view>
						<view class="operat__item" @tap.stop="toPage" data-url="/pageDealer/qrcode/qrcode" :data-auth="true">
							<view class="item__icon"><text class="suifont sui-erweima" style="color:#5fa5ff;"></text></view>
							<view class="item__text f-28">推广二维码</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			isData: false,
			background: '',
			user: {},
			dealer: {},
			is_dealer: false,
			words: {},
			windowHeight: null
		};
	},
	onShow() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		this.getDealerCenter();
	},
	methods: {
		/**
		 * 获取分销商中心数据
		 */
		getDealerCenter() {
			this.$u.api.getDealerCenter().then(res => {
				let data = res.data;
				this.isData = true;
				uni.setNavigationBarTitle({
					title: '分销中心'
				});
				this.background = data.background;
				this.dealer = data.dealer;
				this.is_dealer = data.is_dealer;
				this.user = data.user;
				this.words = data.words;
			});
		},
		/**
		 * 跳转到提现页面
		 */
		navigationToWithdraw() {
			Route.navigateTo({
				url: '../withdraw/apply/apply'
			});
		}
	}
};
</script>

<style>
page {
	background: #fff;
	height: 100%;
}

.dealer-bg image {
	width: 100%;
}

.widget-body .widget {
	width: 700rpx;
	box-sizing: border-box;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
	border-radius: 12rpx;
	z-index: 3;
}

.widget__base {
	margin-top: -60rpx;
}

.widget__base .base__user {
	position: relative;
	padding: 15rpx 40rpx;
	border-bottom: 1rpx solid #e7e7e7;
}

.widget__base .base__user .user-avatar {
	position: absolute;
	top: -75rpx;
	right: 60rpx;
}

.widget__base .base__user .user-avatar image {
	width: 150rpx;
	height: 150rpx;
	z-index: 10;
	border: 4rpx solid #fff;
	border-radius: 50%;
	background: #ddd;
}

.widget__base .base__user .user-nickName {
	margin-top: 30rpx;
	margin-bottom: 10rpx;
}

.widget__base .base__capital {
	padding: 35rpx;
}

.widget__base .base__capital .capital-card {
	height: 200rpx;
	padding: 30rpx 0;
	background-color: #8e84fc;
	border-radius: 10rpx;
	box-sizing: border-box;
	text-align: center;
}

.widget__base .base__capital .capital-card .card-right .withdraw-btn {
	width: 130rpx;
	height: 50rpx;
	line-height: 50rpx;
	background: #fff;
	color: #8e84fc;
	border-radius: 25rpx;
	margin-right: 32rpx;
}

.widget__base .base__capital .capital-already {
	padding: 20rpx;
	padding-bottom: 0;
}

/* 操作列表 */

.widget__operat {
	width: 100%;
	margin-top: 40rpx;
}

.widget__operat .operat__item {
	width: 33.33333%;
	float: left;
	margin-bottom: 50rpx;
	text-align: center;
}

.widget__operat .operat__item:last-child {
	margin-bottom: 0;
}

.widget__operat .operat__item .item__icon {
	margin-bottom: 8rpx;
}

.widget__operat .operat__item .item__icon text {
	font-size: 60rpx;
}

/* 当前不是分销商 */

.no-dealer {
	padding-top: 150rpx;
}

.no-icon image {
	width: 420rpx;
	height: 240rpx;
}

.no-msg {
	padding: 86rpx 0;
}

.form-submit button {
	font-size: 30rpx;
	background: #786cff;
	border: 1rpx solid #786cff;
	color: white;
	border-radius: 50rpx;
	padding: 0 80rpx;
	min-width: 470rpx;
	box-sizing: border-box;
}

.form-submit button[disabled] {
	background: #8e84fc;
	border-color: #8e84fc;
	color: white;
}
</style>
